<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_关联手牌</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/util.js" />"></script>
		<script type="text/javascript">
			function onResetToken(){
				$("#tokenNo").val("");
				$("#tokenTypeName").combobox("setValue", "-1");
			}
			
			function onQueryToken(){
				$('#tokenTable').datagrid({
					url: 'queryToken.do',
					pageNumber:1,			
					queryParams:{tokenNo:$("#tokenNo").val(),
						tokenType:$("#tokenTypeName").combobox('getValue')}
				});
			}
			
			var rowIndex = 0;
			function onAdd(){
				var relateTokenEle = document.getElementsByName("relateTokenNos");
				if(relateTokenEle != 'undefined' && relateTokenEle.length > 0){
					var flag = false;
					for(var i = 0; i < relateTokenEle.length; i++){
						if(relateTokenEle[i].value == $("#selToken").val()){							
							flag = true;
							break;
						}
					}
					if(flag)
						return;
				}
				
				var row = "<tr style='cursor:pointer;' id='relateTR" + rowIndex + "'";
				row += "onmouseover=\"this.className='m1'\" onmouseout=\"this.className='m'\" onclick='onSeledToken(" + rowIndex + ")'>";
				row += "<td>" + $("#selToken").val();
				row += "<input type='hidden' value='" + $("#selToken").val() + "' name='relateTokenNos' />";
				row += "</td>";
				row += "</tr>";
				$("#relateTokenTable").append(row);
				rowIndex++;
			}
			
			function onSeledToken(row){
				$("tr[id^='relateTR']").attr("style", "background-color:#fff");
				$("#relateTR" + row).attr("style", "background-color:#FBEC88");
				$("#removeToken").val(row);
			}
			
			function onDel(){				
				$("#relateTR" + $("#removeToken").val()).remove();
				$("#removeToken").val('');
			}
			
			function onCancel(){
				$("#boundTokenNo").val('');
				var row = $("#relateTokenTable tr").length;
				
				for(var i = row; i >= 0; i--){					
					$("#relateTokenTable").find("tr").eq(i).remove();
				}
			}
			
			function onSubmit(){
				if($.trim($("#boundTokenNo").val()) == ''){
					$.messager.alert('警告','请填写关联的手牌!');	
					return false;
				}
				
				var rows = document.getElementsByName("relateTokenNos");				
				if(rows != 'undefined' && rows.length > 0){
					var relateToken = "";
					for(var i = 0; i < rows.length; i++){
						relateToken += rows[i].value + (i == rows.length - 1 ? '' : ',');
					}
					
					$.ajax({
						url:'relateByToken',
						data:{'boundToken':$("#boundTokenNo").val(),
							  'relateToken':relateToken},
						type:'post',
						dataType:'text',
						async:false,
						cache:false,
						success:function(data){
							if(data == 'success'){								
								onCancel();
								onResetToken();
								onQueryToken();
								$.messager.alert('操作结果','关联手牌成功!');
							}else
								$.messager.alert('操作结果',data);
						}
					});
				}else
					$.messager.alert('警告','请选择被关联的手牌!');
			}
		</script>
		
		<style type="text/css">
			.m1{
				background-color:#FBEC88;
			}
			.m{
				background-color:#fff;
			}
		</style>
	</head>
	
	<body>
		<c:import url="/WEB-INF/resources/common/consult_header.jsp" />
		
		<h1>关联手牌</h1>
		
		手牌号：<input type="text" name="boundTokenNo" id="boundTokenNo" />
		
		<table width="700px;">
			<tr>
				<td width="450px;">
					<fieldset style="height:400px;">
						<legend>待选手牌</legend>
						<table id="tokenTable" class="easyui-datagrid" style="width:450px;height:350px;"
				 			data-options="rownumbers:true,singleSelect:true, border:true,singleSelect:true,toolbar:'#tb',
				 					pagination:true,url:'queryToken',onClickRow:function(rowIndex, rowData){
					 						$('#selToken').val(rowData.token_no);
					 				}">
							<thead>
								<tr>
									<th data-options="field:'token_no',width:100,align:'center'">手牌编号</th>
									<th data-options="field:'tokenTypeName',width:155,align:'center'">手牌类型</th>
									<th data-options="field:'statusName',width:155,align:'center'">手牌状态</th>
								</tr>
							</thead>
						</table>
					
						<div id="tb" style="padding:5px;height:auto;padding-bottom: 10px;">
							<form id="queryTokenForm" name="queryTokenForm" action="queryToken" method="post">
							<div>
								手牌编号: <input class="easyui-validatebox" name="tokenNo" id="tokenNo" style="width:80px">
								&nbsp;&nbsp;&nbsp;&nbsp;
								手牌类型:
								<select id="tokenTypeName" name="tokenTypeName" class="easyui-combobox" data-options="panelHeight:'auto'">
									<option value="-1" selected="selected">所有</option>
									<c:forEach var="code" items="${tokenTypeList}">
										<option value="${code.id}">${code.token_type_name}</option>	
									</c:forEach>
								</select> 
								&nbsp;&nbsp;&nbsp;&nbsp;
								<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQueryToken()">查询</a>
								<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onResetToken()">清空</a>
							</div>
							</form>
						</div>
					</fieldset>
				</td>
				
				<td width="100px;" style="vertical-align: middle;text-align: center;">
					<input type="button" name="selBtn" id="selBtn" value="&nbsp;选&nbsp;择&nbsp;" onclick="onAdd()">
					<br/> 
					<input type="button" style="margin-top: 10px;" name="removeBtn" id="removeBtn" value="&nbsp;移&nbsp;除&nbsp;" onclick="onDel()">
				</td>
				
				<td width="150px;">
					<fieldset style="height:400px;">
						<legend>关联手牌</legend>
						手牌号：
						<div style="overflow-y:auto;border:1px solid #7F9DB9;width: 150px; min-height:350px;">
							<table id="relateTokenTable" width="150px;" border="0" cellpadding="0" cellspacing="0" style="margin-top: 5px;">
							</table>
						</div>
					</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" name="sb" id="sb" value="确&nbsp;定" onclick="onSubmit()"/>
					&nbsp;&nbsp;
					<input type="button" name="cancelBtn" id="cancelBtn" value="取&nbsp;消"  onclick="onCancel()"/>
				</td>
			</tr>
		</table>
		
		<input type="hidden" name="selToken" id="selToken" />
		<input type="hidden" name="removeToken" id="removeToken" />
	</body>
</html>